import React, { Component } from 'react'
import { getRandom } from '../utils/common';
import Ball from './Ball.jsx'

export default class BallList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      balls: [],
    };
    const timer = setInterval(() => {
      this.setState({
        balls: [...this.state.balls, <Ball xSpeed={getRandom(200, 500)} ySpeed={300} bg={`rgb(${getRandom(0, 255)}, ${getRandom(0, 255)}, ${getRandom(0, 255)})`} />],
      })
      if (this.state.balls.length === 10) {
        clearInterval(timer)
      }
    }, 1000);
  }
  render() {
    const ballList = this.state.balls
    return (
      <div className="ball-list">
        {ballList.map((ball, index) => (
          <div key={index} className="ball-item">
            {ball}
          </div>
        ))}
      </div>
    );
  }
}
